<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Eclipse Ditto - Sandbox</title>
    <link rel="icon" type="image/png" href="./images/favicon-16x16.png" sizes="16x16"/>
    <link rel="icon" type="image/png" href="./images/favicon-32x32.png" sizes="32x32"/>
    <link rel="icon" type="image/png" href="./images/favicon-96x96.png" sizes="96x96"/>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <style>
        body {
        }

        .ditto-logo {
            width: 3em;
        }

        h1 {
            font-size: 55px;
            color: black;
        }

        body {
            font: 20px Helvetica, sans-serif;
            color: #333;
        }

        a {
            color: #3a8c9a;
            text-decoration: none;
        }

        a:hover {
            color: #333;
            text-decoration: none;
        }

        .stats {
            line-height: 3em;
        }

        .stats-count {
            font: normal 2em SansSerif;
            color: #3a8c9a;
            font-weight: bold;
            text-align: center;
            margin: 5px;
            clear: left;
            float: left;
            width: 5em;
            background-color: lightgray;
        }

        .stats-count-text {
            padding-left: 1em;
            vertical-align: middle;
        }

        .health {
            background-size: contain;
            height: 30px;
            width: 30px;
            float: left;
        }

        .health-up {
            background-image: url(ditto-sandbox-up.svg);
        }

        .health-down {
            background-image: url(ditto-sandbox-down.svg);
        }

        .health-list li {
            clear: both;
            line-height: 30px;
            padding-bottom: 5px;
        }

        .health-key {
            float: left;
            width: 9em;
        }

        .health-status {
            line-height: 30px;
            padding-left: 1em;
        }
        
        .grafana {
            padding-top: 20px;
        }
    </style>
</head>
<body>

<article>
    <h1><img src="./images/ditto.svg" class="ditto-logo" alt="Eclipse Ditto logo"> - Sandbox</h1>
    <div style="clear: both">
        <p>Welcome to the Eclipse Ditto™ sandbox.</p>
        <p>
            You can use this sandbox to gather first experiences with the Eclipse Ditto <a href="/apidoc">HTTP
            API</a>.<br/> The Swagger UI for exploring the API will require authentication.
        </p>
        <p>
            Visit the Eclipse Ditto <a href="https://www.eclipse.dev/ditto/intro-overview.html">documentation</a> in
            order to learn more about the project.
        </p>
        <p>
            Please consider that this sandbox has (very) limited resources - so don't expect a high performance setup.
        </p>
        <h2>Eclipse Ditto explorer UI</h2>
        <p>
            The sandbox also hosts the <a href="/ui?primaryEnvironmentName=ditto_sandbox">Ditto explorer UI</a>.
        </p>
        <p>
            Choose "ditto_sandbox" from the environment drop-down at the top right in order to explore the things in the sandbox.
        </p>
        <h2>Ditto WoT Extension Ontology</h2>
        <p>
            The Ditto WoT Extension Ontology can be found here:
            <a href="https://ditto.eclipseprojects.io/wot/ditto-extension#">https://ditto.eclipseprojects.io/wot/ditto-extension#</a>
        </p>
        <h2>Authentication</h2>
        <p>
            When using the <a href="/apidoc">HTTP API</a> you can authenticate with your Google account in order to use
          a user ID belonging to only you.
        </p>
        <p>
            Alternatively (also in order to connect to the WebSocket API) you can use one of the pre-defined user/password
            combinations (which may be used by anyone) and provide them via "basic auth" <span style="font-family: monospace">Authorization</span> header:
        </p>
        <ul>
            <li>demo1:demo</li>
            <li>demo2:demo</li>
            <li>...</li>
            <li>demo9:demo</li>
        </ul>
        <p>
            If you create any entity, either your Google user ID or some of the "basic auth" user's ID will be
            added to that entity in order to authorize you work with it.
        </p>
    </div>
    <h2 style="clear: both">Version</h2>
    <p>This sandbox is running Eclipse Ditto version:
        <span id="ditto-version" style="font-family: monospace; font-weight: bold; padding: 0.5em"></span>
    </p>
    <h2 style="clear: both">Health</h2>
    <div id="health-content">
    </div>
    <h2>Statistics</h2>
    <div>
        <div class="stats">
            <span id="total-things-count" class="stats-count"></span><span
                class="stats-count-text"> persisted <i>Things</i> in the Ditto sandbox</span>
        </div>
        <div class="stats">
            <span id="hot-things-count" class="stats-count"></span><span class="stats-count-text"> currently "hot" <i>Things</i> (accessed within the last 2 hours) in the Ditto sandbox</span>
        </div>
    </div>
</article>

<script>
    function update_count(selector, count) {
        $(selector).animate({
                                counter: count
                            }, {
                                duration: 3000,
                                easing: 'swing',
                                step: function (now) {
                                    $(this).text(Math.ceil(now));
                                }
                            });
    }

    $.getJSON("/stats/search", function (data) {
        let allThingsCount = data.allThingsCount;
        update_count('#total-things-count', allThingsCount);
    }).fail(function () {
        update_count('#total-things-count', 0);
    });
    $.getJSON("/stats/things", function (data) {
        let hotThings = data.hotThings;
        update_count('#hot-things-count', hotThings);
    }).fail(function () {
        update_count('#hot-things-count', 0);
    });

    function calcHealthStatusClass(status) {
        let healthStatusClass;
        if (status === "UP") {
            healthStatusClass = "health-up";
        } else if (status === "DOWN") {
            healthStatusClass = "health-down";
        } else {
            healthStatusClass = "health-down";
        }
        return healthStatusClass;
    }

    $.getJSON("/status", function (data) {
        let dittoVersion = data['service-version'];
        $(`<span>${dittoVersion}</span>`)
          .appendTo("#ditto-version");
    }).fail(function () {
    });

    function caclulateHealth(data) {
        const keysToIgnore = ['status', 'thing-cache-aware', 'dc-default', 'policy-cache-aware',
                              'blocked-namespaces-aware'];
        let overallStatus = data.status;
        $(`<p>
            <span class="health-key"></span>
            <span class="health ${calcHealthStatusClass(overallStatus)}"></span>
            <span class="health-status">${overallStatus}</span>
        </p>`).appendTo("#health-content");

        let items = [];
        $.each(data.children, function (idx, child) {
            if (keysToIgnore.includes(child.label)) {
                // ignore
            } else {
                items.push(`<li>
                    <span class="health-key">${child.label}:</span>
                    <span class="health ${calcHealthStatusClass(child.status)}"></span>
                    <span class="health-status">${child.status}</span>
                </li>`);
            }
        });

        $("<ul/>", {
            "class": "health-list",
            html: items.join("")
        }).appendTo("#health-content");
    }

    $.getJSON("/status/health", function (data) {
        caclulateHealth(data);
    }).fail(function (jqXHR, textStatus, errorThrown) {
        caclulateHealth(jqXHR.responseJSON);
    })
</script>
</body>
</html>

